<template>
    <van-button
        :icon="value ? 'star':'star-o'"
        :color="value ?'#3296fa':'#777'"
        @click="onCollect"
        plain
        :loading="collectLoading"
    />
</template>

<script>
import {addCollect,deleteCollect} from '@/api/user'
export default {
    name:'ArticleCollect',
    props:{
        // 接受是否被收藏
        value:{
            type:Boolean,
            required:true
        },
        // 文章ID，外部传入
        articleId:{
            type:[String,Number,Object],
            required:true
        }
    },
    data(){
        return{
            collectLoading:false // 是否收藏中
        }
    },
    methods:{
        async onCollect(){
            this.collectLoading = true // 显示加载中
            try {
                // 是否收藏
                if(this.value){
                    // 要取消收藏
                    await deleteCollect(this.articleId.toString())
                }else{
                    // 要收藏
                    await addCollect(this.articleId.toString())
                }
                 // 提示框
                this.$toast.success(this.value ? '取消成功':'收藏成功')
                // 通知更新
                this.$emit('input',!this.value)
            } catch (error) {
                console.log(error);
                //401是没有登录，或者登录失效
                if (error.response && error.response.status === 401) {
                    this.$toast("请登录");
                    this.$router.push("/login"); //跳转去登录
                }else{
                    this.$toast.fail('操作失败')
                }
            }
            this.collectLoading = false  // 关闭加载中
        }
    }
}
</script>

<style>

</style>